import React, {useEffect, useState} from 'react';
import axios, {get} from "axios";
import {getGoodsListAsync, upGoodsList, useSelectorGoods} from "./store/slices/goods";
import {useDispatch} from "react-redux";

function App() {
    const {goodsList} = useSelectorGoods();
    const dispatch = useDispatch();
    // 1
    // const getGoodsList = async function () {
    //     const {data} = await axios.get("http://localhost:3000/goodsList");
    //     dispatch(upGoodsList(data))
    // }

    // 2
    // const getGoodsList = async function () {
    //     // const result = dispatch(function(){
    //     //     console.log("12");
    //     //     return 100
    //     // })
    //     // console.log("13",result);// 13 100
    //
    //     const result = dispatch(async function(){
    //         const {data} = await axios.get("http://localhost:3000/goodsList");
    //         dispatch(upGoodsList(data))
    //     })
    //     console.log("13",result);// promise->fulfilled->undefined
    // }

    // 3
    // const getGoodsList = function(){
    //     dispatch(async function(){
    //         const {data} = await axios.get("http://localhost:3000/goodsList");
    //         dispatch(upGoodsList(data))
    //     })
    // }
    // useEffect(function () {
    //     getGoodsList();
    // }, [])


    // 4
    // useEffect(function(){
    //     dispatch(async function(){
    //         const {data} = await axios.get("http://localhost:3000/goodsList");
    //         dispatch(upGoodsList(data))
    //     })
    // },[])


    // 5
    // useEffect(function(){
    //     dispatch(async function(dispatch,getState){
    //         console.log(getState())
    //         const {data} = await axios.get("http://localhost:3000/goodsList");
    //         dispatch(upGoodsList(data))
    //     })
    // },[])


    // 6
    // async function getGoodsListAsync(dispatch){
    //     const {data} = await axios.get("http://localhost:3000/goodsList?goodsPrice=200");
    //     dispatch(upGoodsList(data))
    // }
    // useEffect(function(){
    //     dispatch(getGoodsListAsync)
    // },[])

    // 7
    // function getGoodsListAsync(goodsPrice){
    //     return async function(){
    //         const {data} = await axios.get("http://localhost:3000/goodsList?goodsPrice="+goodsPrice);
    //         dispatch(upGoodsList(data))
    //     }
    //
    // }
    // useEffect(function(){
    //     dispatch(getGoodsListAsync(100))
    // },[])

    // 8
    useEffect(function(){
        dispatch(getGoodsListAsync(200)).then(value=>{
            console.log(value)
        })
    },[])
    return (
        <div>
            {
                goodsList.map(item => (
                    <div key={item.id}>
                        <p>商品名称：{item.goodsName}</p>
                        <p>商品价格：{item.goodsPrice}</p>
                        <hr/>
                    </div>
                ))
            }
        </div>
    );
}

export default App;